<template>
  <n-button @click="showAddModal = true">添加</n-button>
  <n-table :bordered="false" :single-line="false">
    <thead>
      <tr>
        <th>编号</th>
        <th>名称</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in categoryList" :key="index">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>
          <n-space>
            <!-- 默认样式有间隙 -->
            <n-button @click="toUpdate(item)">修改</n-button>
            <n-button @click="delCategory(item)">删除</n-button>
          </n-space>
        </td>
      </tr>
    </tbody>
  </n-table>

  <!-- 使用 Dialog 预设的插槽 -->
  <n-modal v-model:show="showAddModal" preset="dialog" title="Dialog">
    <template #header>
      <div>添加分类</div>
    </template>
    <div>
      <n-input v-model:value="addCategoryName" type="text" placeholder="请输入名称" />
    </div>
    <template #action>
      <div>
        <n-button @click="add">提交</n-button>
      </div>
    </template>
  </n-modal>

  <n-modal v-model:show="showUpdateModal" preset="dialog" title="Dialog">
    <template #header>
      <div>修改分类</div>
    </template>
    <div>
      <n-input v-model:value="UpdateCategoryName" type="text" placeholder="请输入名称" />
    </div>
    <template #action>
      <div>
        <n-button @click="update">提交</n-button>
      </div>
    </template>
  </n-modal>
</template>
<script setup>
import { AdminStore } from '../../stores/AdminStore'
import { ref, reactive, inject, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

const message = inject("message")
const dialog = inject("dialog")
const axios = inject("axios")

const adminStore = AdminStore()

//定义变量
const categoryList = ref([])
const showAddModal = ref(false)
const addCategoryName = ref('')
const showUpdateModal = ref(false)
const UpdateCategoryName = ref('')
const UpdateCategoryId = ref('')
onMounted(() => {
  loadDatas()
})
const loadDatas = async () => {
  let res = await axios.get('/category/list')
  categoryList.value = res.data.rows
}

const add = async () => {
  let { data } = await axios.post("/category/_token/add", { name: addCategoryName.value })
  showAddModal.value = false
  if (data.code == 200) {
    message.info(data.msg)//添加成功
    addCategoryName.value = ""
    loadDatas()
  } else {
    message.error(data.msg)//添加失败
  }
}

const delCategory = (item) => {
  dialog.warning({
    title: '警告',
    content: '是否要删除',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      let { data } = await axios.delete(`/category/_token/delete?id=${item.id}`)
      if (data.code == 200) {
        message.info(data.msg)//删除成功
        loadDatas()
      } else {
        message.error(data.msg)//删除失败
      }
    },
    onNegativeClick: () => { }
  })
}

const toUpdate = (item) => {
  showUpdateModal.value = true
  UpdateCategoryName.value = item.name
  UpdateCategoryId.value = item.id
}

const update = async () => {
  let { data } = await axios.put("/category/_token/update", { id: UpdateCategoryId.value, name: UpdateCategoryName.value })
  showUpdateModal.value = false
  if (data.code == 200) {
    message.info(data.msg)//修改成功
    addCategoryName.value = ""
    loadDatas()
  } else {
    message.error(data.msg)//修改失败
  }
}
</script>
<style scoped lang='scss'></style>
